<template>
	<view style="height: 100%;">
		<!--首页顶部-->
		<view class="top_view">
			<u-row justify="center" align="center">
				<u-notice-bar :font-size="16" :speed="50" color="#3c9cff" icon="" bgColor="transparent"
					:text="deviceDesc"></u-notice-bar>
			</u-row>
		</view>

		<!--车型图片-->
		<view class="u_content">
			<u-image width="100%" height="100%" mode="widthFix" src="../../static/banner/car.png"></u-image>
		</view>

		<!--宫格展示区域-->
		<view>
			<view style="background-color: #ffffff;border-radius: 10rpx;margin: 1% 2% 0% 2%;height: 12vh;">
				<u-grid align="center" col="4" :border="false">
					<u-grid-item bg-color="transparent" @click="openHeightVue">
						<u-icon name="../../static/grid/gaoji.png" size="28"></u-icon>
						<view class="grid-text">高级功能</view>
					</u-grid-item>
					<u-grid-item bg-color="transparent" @click="goToManual">
						<u-icon name="../../static/grid/yuntai.png" size="26"></u-icon>
						<view class="grid-text">手动模式</view>

					</u-grid-item>
					<u-grid-item bg-color="transparent" @click="initBlue">
						<u-icon name="../../static/grid/lianjie.png" size="23"></u-icon>
						<view class="grid-text">重连设备</view>
					</u-grid-item>
					<u-grid-item bg-color="transparent" @click="gotoSetting">
						<u-icon name="../../static/grid/xitong.png" size="26"></u-icon>
						<view class="grid-text">系统设置</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<!--高度信息展示-->
		<view class="u_content" style="height: 29vh;background-color: #ffffff;border-radius: 16rpx;">
			<u-row style="height: 5vh;" align="center">
				<u-icon size="22" name="../../static/icon/tiaozheng.png"></u-icon>
				<span style="font-size: 32rpx;font-weight: 600;;line-height: 36rpx;margin-left: 15rpx;">当前高度(mm)</span>
			</u-row>
			<u-row gutter="20" style="margin-top: 2%;height: 10vh;">
				<u-col span="6" style="padding-left: 3%;padding-right: 3%;">
					<view class="height_view_left">
						<u-row class="height_span_name"><span>前左</span></u-row>
						<u-row>
							<u-count-to class="height_span_unit" color="#2563eb" :bold="true" :start-val="0"
								:end-val="revertData.height1" :duration="1000" :useEasing="false"></u-count-to>
						</u-row>
						<u-row class="height_line"><u-line-progress :percentage="revertData.height1"
								activeColor="#facc15" inactiveColor="#f0f6ff"></u-line-progress></u-row>
					</view>
				</u-col>
				<u-col span="6" style="padding-left: 3%;padding-right: 3%;">
					<view class="height_view_right">
						<u-row><span class="height_span_name">前右</span></u-row>
						<u-row><u-count-to class="height_span_unit" color="#2563eb" :bold="true" :start-val="0"
								:end-val="revertData.height2" :duration="1000" :useEasing="false"></u-count-to></u-row>
						<u-row class="height_line"><u-line-progress :percentage="revertData.height2"
								activeColor="#facc15" inactiveColor="#f0f6ff"></u-line-progress></u-row>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="20" style="margin-top: 3%;">
				<u-col span="6" style="padding-left: 3%;padding-right: 3%;">
					<view class="height_view_left">
						<u-row><span class="height_span_name">后左</span></u-row>
						<u-row><u-count-to class="height_span_unit" color="#2563eb" :bold="true" :start-val="0"
								:end-val="revertData.height3" :duration="1000" :useEasing="false"></u-count-to></u-row>
						<u-row class="height_line"><u-line-progress :percentage="revertData.height3"
								activeColor="#facc15" inactiveColor="#f0f6ff"></u-line-progress></u-row>
					</view>
				</u-col>
				<u-col span="6" style="padding-left: 3%;padding-right: 3%;">
					<view class="height_view_right">
						<u-row><span class="height_span_name">后右</span></u-row>
						<u-row><u-count-to class="height_span_unit" color="#2563eb" :bold="true" :start-val="0"
								:end-val="revertData.height4" :duration="1000" :useEasing="false"></u-count-to></u-row>
						<u-row class="height_line"><u-line-progress :percentage="revertData.height4"
								activeColor="#facc15" inactiveColor="#f0f6ff"></u-line-progress></u-row>
					</view>
				</u-col>
			</u-row>
		</view>

		<!--车身高度调整展示框-->
		<view style="background-color: #ffffff;height: 15vh;padding: 10rpx;border-radius: 10rpx;margin: 2% 2% 0% 2%;">
			<u-row style="height: 5vh;" align="center">
				<u-icon size="22" name="../../static/icon/tiaozheng.png"></u-icon>
				<span style="font-size: 32rpx;font-weight: 600;;line-height: 36rpx;margin-left: 15rpx;">车身高度调节</span>
			</u-row>
			<u-row gutter="10" justify="center" align="center" style="height: 8vh;margin-top: 2%;">
				<u-col span="4">
					<u-button @click="heightModel(3,2)" type="primary" size="small" :plain="true" shape="circle"
						text="高(过障模式)"></u-button>
				</u-col>
				<u-col span="4">
					<u-button @click="heightModel(3,1)" type="primary" size="small" :plain="true" shape="circle"
						text="中(正常行走)"></u-button>
				</u-col>
				<u-col span="4">
					<u-button type="primary" size="small" :plain="true" shape="circle" text="低(低趴模式)"
						@click="heightModel(3,0)"></u-button>
				</u-col>
			</u-row>
		</view>

		<!--悬挂软硬调整展示框-->
		<view style="background-color: #ffffff;height: 15vh;padding: 10rpx;border-radius: 10rpx;margin: 2% 2% 0% 2%;">
			<u-row style="height: 5vh;" align="center">
				<u-icon size="22" name="../../static/icon/tiaozheng.png"></u-icon>
				<span style="font-size: 32rpx;font-weight: 600;;line-height: 36rpx;margin-left: 15rpx;">悬挂软硬调整</span>
			</u-row>
			<u-row gutter="10" justify="center" align="center" style="height: 8vh;margin-top: 2%;">
				<u-col span="4" @click="controlMode(2,2)">
					<u-button v-if="revertData.convertShockMode==2" type="primary" size="small" :plain="false"
						shape="circle" text="高速模式"></u-button>
					<u-button v-else type="primary" size="small" :plain="true" shape="circle" text="高速模式"></u-button>
				</u-col>
				<u-col span="4" @click="controlMode(2,1)">
					<u-button v-if="revertData.convertShockMode==1" type="primary" size="small" :plain="false"
						shape="circle" text="运动模式"></u-button>
					<u-button v-else type="primary" size="small" :plain="true" shape="circle" text="运动模式"></u-button>
				</u-col>
				<u-col span="4" @click="controlMode(2,0)">
					<u-button v-if="revertData.convertShockMode==0" type="primary" size="small" :plain="false"
						shape="circle" text="舒适模式"></u-button>
					<u-button v-else type="primary" size="small" :plain="true" shape="circle" text="舒适模式"></u-button>
				</u-col>
			</u-row>
		</view>

		<view>
			<u-overlay :show="overlayShow" mask-click-able="false">
				<view class="warp">
					<u-loading-icon color="#3c9cff" :show='loadingShow' :text="loadingText" textColor="#55aaff"
						textSize="18"></u-loading-icon>
				</view>
			</u-overlay>
		</view>

		<manualVue :manualData="revertData" v-on:pSendData="getManualData" ref="manualVuePage"></manualVue>
		<advanced :advancedData="revertData" v-on:pAdvancedData="getAdvancedData" ref="advancedPage"></advanced>
		<settingVue :setedData="revertData" v-on:pSensor="getSensor" v-on:pGetQrMac="getQrMac" ref="settingVuePage">
		</settingVue>
		
		
	</view>
</template>

<script>
	import advanced from '../../components/advanced/advanced.vue'
	import manualVue from '../../components/manual/manual.vue'
	import settingVue from '../../components/setting/setting.vue'
	import {
		parseData
	} from '../../util/parseData'
	export default {
		components: {
			manualVue,
			advanced,
			settingVue
		},
		data() {
			return {
				deviceId: "", //蓝牙的mac地址
				deviceStatus: false, //蓝牙设备连接状态
				serviceId: "6E400001-B5A3-F393-E0A9-E50E24DCCA9E", //特征值id
				writeCharacteristicId: "6E400002-B5A3-F393-E0A9-E50E24DCCA9E", // 可写特征值
				notifyCharacteristicId: "6E400003-B5A3-F393-E0A9-E50E24DCCA9E", //监听特征值
				message: '',
				messageHex: '', //16进制
				loadingShow: false,
				overlayShow: false,
				loadingText: '',
				deviceDesc: "无设备连接",
				pageIsShow: true, //页面是否被隐藏
				searchTimer: null,
				platSys: null,
				qrStatus: false,
				sendNormalStatus: false,
				cycleTimer: null,
				cycleDelay: 2000,
				timerId: null,
				revertData: {
					height1: '未知',
					height2: '未知',
					height3: '未知',
					height4: '未知',
					roadStaus: false,
					speedStatus: false,
					antiRoll: false,
					breakNode: false
				} //硬件上报后转换的数据
			};
		},
		onLoad() {
			let that = this;
			//开启设备掉线监听
			// this.deviceState();
			//检测系统平台
			this.getPlatForm();
			//开启定时
			this.startCycleTimer();

		},

		mounted() {
			let msg = "7E 14 81 64 32 00 00 E8 03 BC 02 F4 01 2C 01 03 03 01 06 37";
			// let resHex = this.ab2hex(msg);
			// console.log(resHex);
			// let revertStr = resHex.replace(/(..)/g, '$1 ').trim();
			this.revertData = parseData(msg);
			console.log(this.revertData);
		},
		methods: {
			goToManual() {
				this.$refs.manualVuePage.open();
			},
			openHeightVue() {
				this.$refs.advancedPage.open();
			},
			gotoSetting() {
				this.$refs.settingVuePage.open();
			},
			startCycleTimer() {
				let that = this;
				//开启定时发送周期数据
				this.cycleTimer = setInterval(function() {
					if (that.deviceStatus == true) {
						that.assembleData(7, '');
					}
				}, 2000)

			},
			stopCycleTimer() {
				clearInterval(this.cycleTimer);
				this.cycleTimer = null;
			},
			getPlatForm() {
				this.platSys = uni.getSystemInfoSync().platform;
			},
			//高度模式切换和保存
			heightModel(type, data) {
				for (let i = 0; i < 1; i++) {
					//先发送切换模式指令
					let pre = 0 + '' + data;
					if (i == 0) {
						pre = pre + '00';
					} else {
						setTimeout(() => {}, 200)
						pre = pre + '01';
					}
					this.assembleData(3, pre);
				}
			},
			//控制模式切换和保存
			controlMode(type, data) {
				this.revertData.convertShockMode = data;
				for (let i = 0; i < 2; i++) {
					//先发送切换模式指令
					let pre = 0 + '' + data;
					if (i == 0) {
						pre = pre + '00';
					} else {
						setTimeout(() => {}, 200)
						pre = pre + '01';
					}
					this.assembleData(2, pre);
				}
			},
			getAdvancedData(hexData) {
				//将2进制转为16进制
				let decimalNumber = parseInt(hexData, 2); // 将二进制字符串转换为十进制数
				let hexString = decimalNumber.toString(16);
				if (hexString.length < 2) {
					hexString = '0' + hexString;
				}
				let msg = hexString + '00';
				this.assembleData(4, msg);
			},
			getManualData(binaryString, beforeVal, afterVal) {
				//先将前后电流从10进制转为16进制
				let beforeV = beforeVal.toString(16);
				let afterV = afterVal.toString(16);
				//将2进制转为16进制
				let decimalNumber = parseInt(binaryString, 2); // 将二进制字符串转换为十进制数
				let hexString = decimalNumber.toString(16);
				if (hexString.length < 2) {
					hexString = '0' + hexString;
				}
				//组装msg
				let msg = '' + beforeV + afterV + '0000' + hexString;
				this.assembleData(1, msg);
			},
			//获取扫码得到的蓝牙MAC地址
			getQrMac(res) {
				try {
					this.qrStatus = true;
					//先断开与原有设备的连接
					if (this.deviceStatus == true) {
						this.closeConnect();
						this.closeBlue();
					}
					//记录地址到缓存
					uni.setStorageSync("deviceId", res);
					this.deviceId = res;
					this.$refs.settingVuePage.close();
					this.deviceDesc = '设备：' + res + '正在连接中...'
					this.initBlue();
				} catch (e) {
					console.log(e);
				}

			},
			getSensor(context) {
				this.assembleData(5, context);
			},
			startTimer() {
				// 清除之前的定时器（如果存在）
				this.clearTimer();
				// 设置新的定时器
				this.timerId = setTimeout(() => {
					// 定时器执行后的逻辑
					this.loadingText = '未搜索到设备';
					this.overlayShow = false;
					this.loadingShow = false;
					uni.showToast({
						title: "搜索超时，未找到设备",
						icon: "none"
					});
					this.clearTimer();
					this.stopDiscovery();
				}, 10000); // 例如3秒后执行
			},
			clearTimer() {
				// 如果定时器存在，则清除它
				if (this.timerId) {
					clearTimeout(this.timerId);
					this.timerId = null; // 重置timerId为null
				}
			},
			// 【1】初始化蓝牙
			initBlue() {
				let that = this;
				uni.openBluetoothAdapter({
					success(res) {
						console.log('初始化蓝牙成功');
						//开始扫描附近的蓝牙设备
						that.findBlue();
					},
					fail(err) {
						uni.showToast({
							title: '请打开蓝牙',
							icon: 'error'
						});
						console.log('初始化蓝牙失败');
						console.error(err);
					}
				});

			},
			// 【2】开始搜寻附近设备
			findBlue() {
				this.startTimer();
				this.loadingText = '蓝牙搜索中';
				this.overlayShow = true;
				this.loadingShow = true;
				let that = this;
				//开始计时
				uni.startBluetoothDevicesDiscovery({
					success(res) {
						// 开启监听回调
						uni.onBluetoothDeviceFound((res) => {
							const device = res.devices[0];
							console.log(device);
							if (that.platSys == 'android') {
								const deviceId = device.deviceId;
								if (deviceId == that.deviceId) {
									this.loadingText = '蓝牙连接中';
									that.deviceId = deviceId;
									that.stopDiscovery();
									that.connect(deviceId);
								}
							} else {
								if (device.localName == 'RF-CRAZY') {
									const deviceId = device.deviceId;
									this.loadingText = '蓝牙连接中';
									that.deviceId = deviceId;
									that.stopDiscovery();
									that.connect(deviceId);
								}

							}

						});
					},
					fail(err) {
						console.log('搜索失败');
						console.error(err);
					}
				});

			},
			// 【4】连接设备
			connect(deviceId) {
				let that = this;
				uni.createBLEConnection({
					deviceId: deviceId,
					success(res) {
						//开启监听
						// that.notify();
						that.getServices(deviceId);
						that.deviceStatus = true;
						that.loadingShow = false;
						that.overlayShow = false;
						that.deviceDesc = '设备：' + deviceId + '已连接';
						uni.showToast({
							title: '连接成功'
						});
						that.qrStatus = false;
						that.clearTimer();
					},
					fail(err) {
						console.log('连接失败');
						console.error(err);
					}
				});
			},
			//监听连接设备的状态
			deviceState() {
				let that = this;
				uni.onBLEConnectionStateChange(function(res) {
					// 该方法回调中可以用于处理连接意外断开等异常情况
					if (res.connected === false && that.pageIsShow === true && that.qrStatus === false) {
						that.deviceStatus = false;
						that.deviceDesc = '设备：' + res.deviceId + '断开连接';
						//重新连接蓝牙设备
						setTimeout(function() {
							that.connect(res.deviceId)
						}, 1000)

					}

				})

			},

			// 【5】停止搜索
			stopDiscovery() {
				uni.stopBluetoothDevicesDiscovery({
					success(res) {
						console.log('停止成功');
						console.log(res);
					},
					fail(err) {
						console.log('停止失败');
						console.error(err);
					}
				});
			},
			// 【6】获取服务
			getServices(deviceId) {
				let that = this;
				setTimeout(() => {
					// 如果是自动链接的话，uni.getBLEDeviceServices方法建议使用setTimeout延迟1秒后再执行
					uni.getBLEDeviceServices({
						deviceId: deviceId,
						success(res) {
							console.log(res);
							that.getCharacteristics();
						},
						fail(err) {
							console.error(err);
						}
					});

				}, 2000);
			},
			//7,获取特征值
			getCharacteristics() {
				let that = this;
				// 如果是自动链接的话，uni.getBLEDeviceCharacteristics方法建议使用setTimeout延迟1秒后再执行
				uni.getBLEDeviceCharacteristics({
					deviceId: this.deviceId,
					serviceId: this.serviceId,
					success(res) {
						console.log(res);
						that.notify();
					},
					fail(err) {
						console.error(err);
					}
				});
			},

			// 【8】开启消息监听
			notify() {
				let that = this;
				uni.notifyBLECharacteristicValueChange({
					deviceId: this.deviceId, // 设备id
					serviceId: this.serviceId, // 监听指定的服务
					characteristicId: this.notifyCharacteristicId, // 监听对应的特征值
					type: 'notification', //安卓手机需要加这个
					state: true,
					success(res) {
						that.listenValueChange();
						uni.showToast({
							title: '已开启监听'
						});
					},
					fail(err) {
						console.error(err);
						uni.showToast({
							title: '监听失败',
							icon: 'error'
						});
					}
				});
			},

			// ArrayBuffer转16进度字符串示例
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2);
					}
				);
				return hexArr.join('');
			},

			// 将16进制的内容转成我们看得懂的字符串内容
			hexCharCodeToStr(hexCharCodeStr) {
				var trimedStr = hexCharCodeStr.trim();
				var rawStr =
					trimedStr.substr(0, 2).toLowerCase() === '0x' ?
					trimedStr.substr(2) :
					trimedStr;
				var len = rawStr.length;
				if (len % 2 !== 0) {
					alert('存在非法字符!');
					return '';
				}
				var curCharCode;
				var resultStr = [];
				for (var i = 0; i < len; i = i + 2) {
					curCharCode = parseInt(rawStr.substr(i, 2), 16);
					resultStr.push(String.fromCharCode(curCharCode));
				}
				let newStr = resultStr.join('');
				let revertStr = newStr.replace(/(..)/g, '$1 ').trim();
				return revertStr;
			},
			// 【9】监听消息变化
			listenValueChange() {
				try {
					let that = this;
					uni.onBLECharacteristicValueChange(res => {
						let resHex = that.ab2hex(res.value);
						let revertStr = resHex.replace(/(..)/g, '$1 ').trim();
						that.revertData = parseData(revertStr);
					});
				} catch (error) {
					console.log(err);
				}

			},
			// 将Hex字符串转为Uint8Array（如 "01A2" → [0x01, 0xA2]）
			hexStringToBytes(hexString) {
				if (hexString.length % 2 !== 0) {
					throw new Error('Hex字符串长度必须为偶数');
				}
				const bytes = new Uint8Array(hexString.length / 2);
				for (let i = 0; i < hexString.length; i += 2) {
					bytes[i / 2] = parseInt(hexString.substr(i, 2), 16);
				}
				return bytes;
			},

			// 将字节数组转回Hex字符串（如 [0x01, 0xA2] → "01A2"）
			bytesToHexString(bytes) {
				return Array.from(bytes)
					.map(byte => byte.toString(16).padStart(2, '0'))
					.join('')
					.toUpperCase(); // 统一转大写
			},
			// 计算Hex字符串的异或校验位（返回1字节Hex字符串）
			xorCheckHex(hexString) {
				const bytes = this.hexStringToBytes(hexString);
				let xor = 0;
				for (const byte of bytes) {
					xor ^= byte;
				}
				// 将结果转为两位Hex（如 0x0A → "0A"）
				return xor.toString(16).padStart(2, '0').toUpperCase();
			},
			assembleData(cmdType, content) {
				//第一个字节位固定7E，第2个字节位表示数据的长度，第3个字节位表示类型，后面是数据位，最后一个位表示校验位
				let cmd = '7E';
				if (cmdType == 1) {
					cmd += '0901';
				} else if (cmdType == 2) {
					cmd += '0602';
				} else if (cmdType == 3) {
					cmd += '0603';
				} else if (cmdType == 4) {
					cmd += '0604';
				} else if (cmdType == 5) {
					cmd += '0505';
				} else if (cmdType == 7) {
					cmd += '0407';
				}
				if (cmdType > 0 && cmdType < 6) {
					//组装传过来的内筒
					cmd = cmd + '' + content;
					//组装校验位
					let endData = this.xorCheckHex(cmd);
					cmd = cmd + endData;
				} else {
					cmd = cmd + '7D';
				}
				this.sendData(cmd, cmdType);

			},
			stringToHex1(str) {
				let hex = '';
				for (let i = 0; i < str.length; i++) {
					hex += str.charCodeAt(i).toString(16);
				}
				return hex;
			},
			hexStringToArrayBuffer(hexString) {
				// 移除可能存在的空格和0x前缀
				const cleanHex = hexString.replace(/\s+|0x/g, '').toLowerCase();

				// 检查是否为有效16进制字符串
				if (!/^[0-9a-f]*$/.test(cleanHex)) {
					throw new Error('输入包含非16进制字符');
				}

				// 检查长度是否为偶数
				if (cleanHex.length % 2 !== 0) {
					throw new Error('16进制字符串长度必须为偶数');
				}

				// 创建字节数组
				const byteArray = new Uint8Array(cleanHex.length / 2);

				// 每两个字符解析为一个字节
				for (let i = 0; i < cleanHex.length; i += 2) {
					const byteValue = parseInt(cleanHex.substring(i, i + 2), 16);
					byteArray[i / 2] = byteValue;
				}

				return byteArray.buffer;
			},
			sendData(data, cmdType) { //发送json数据到蓝牙设备
				try {
					if (cmdType > 0 && cmdType < 6) {
						//清除心跳定时器
						this.stopCycleTimer();
					}
					let that = this;
					const buffer = this.hexStringToArrayBuffer(data);
					// 验证结果（可选）
					const view = new Uint8Array(buffer);
					// 发送数据
					uni.writeBLECharacteristicValue({
						deviceId: that.deviceId,
						serviceId: that.serviceId,
						characteristicId: that.writeCharacteristicId,
						value: buffer, // 需要传 ArrayBuffer
						success: (res) => {
							//开启定时器
							if (cmdType > 0 && cmdType < 6) {
								that.startCycleTimer();
							}
						},
						fail: (err) => {
							console.error("数据发送失败", err);
						}
					});

				} catch (error) {
					console.error("数据 转换错误", error);
				}
			},
			//断开设备连接
			closeConnect() {
				let that = this;
				uni.closeBLEConnection({
					deviceId: that.deviceId,
					success(res) {
						that.deviceStatus = false;

					},
					fail(error) {
						console.log(error);
					}
				})
			},
			//关闭蓝牙适配器
			closeBlue() {
				uni.closeBluetoothAdapter({
					success(res) {
						console.log(res)
					}
				})
			},
			onHide() {
				let that = this;
				this.pageIsShow = false;
				this.closeConnect();
				setTimeout(function() {
					that.closeBlue();
				}, 1000)
			},
			onShow() {
				this.pageIsShow = true;
				//获取蓝牙设备id是否存在缓存中，如果存在直接调用，如果不在提示，扫码
				let deviceId = uni.getStorageSync("deviceId");
				if (!deviceId || deviceId == '') {
					uni.showToast({
						icon: "error",
						title: '请扫描二维码'
					});
					return;
				}
				this.deviceId = deviceId;
				this.initBlue();
			}

		}
	};
</script>

<style lang="scss">
	.top_view {
		height: 10%;
		margin-top: 2%;
	}

	.top_view_span {
		color: #8a8a8a;
		margin-left: 25rpx;
		font-size: 35rpx;
	}

	.u_content {
		margin-top: 2%;
		margin-left: 2%;
		margin-right: 2%;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.height_view_left {
		height: 10vh;
		border: 1px solid #c1dcfe;
		background-color: #e4efff;
		border-radius: 10rpx;
		margin-left: 2%;
	}

	.height_view_right {
		height: 10vh;
		border: 1px solid #c1dcfe;
		background-color: #e4efff;
		border-radius: 10rpx;
		margin-right: 3%;
	}


	.height_span_unit {
		font-size: 50rpx;
		color: #3c9cff;
		font-weight: 300;
		margin-left: 8%;
	}

	.height_span_name {
		font-size: 30rpx;
		// color: #3c9cff;
		margin-left: 8%;
		margin-top: 10rpx;
		font-family: tahoma, "microsoft yahei", "\5FAE\8F6F\96C5\9ED1" !important;
	}

	.height_line {
		margin-left: 8%;
		margin-top: 3%;
	}

	.gradient-button {
		width: 95%;
		height: 4.5vh;

	}

	::v-deep .u-grid-item {
		margin-top: 3%;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 18rpx;
		color: #666;
		font-family: tahoma, "microsoft yahei", "\5FAE\8F6F\96C5\9ED1" !important;
	}
</style>